<template>
  <div class="register">
    <Header></Header>
    <div class="register-box">
      <div class="container">
        <div class="fanhui" @click="goBack">
          <img src="../../assets/icons/back.png" alt="">
          <span>返回登录</span>
        </div>
        <div class="register-form">
          <div class="re-title">
            <p>普通用户注册</p>
            <span></span>
          </div>
          <a-form :form="form" class="formclass">
            <a-form-item>
              <a-input v-model="username" placeholder="请输入账号"></a-input>
            </a-form-item>
            <a-form-item>
              <a-input v-model="mobile" placeholder="请输入手机号"></a-input>
            </a-form-item>
            <a-form-item>
              <a-input v-model="code" placeholder="请输入验证码" style="position: relative"></a-input>
              <a-button type="primary" v-if="!showSecond" style="position: absolute;right: 10px; top: -6px;background: linear-gradient(90deg, #3881F8 0%, #5EA3FE 100%); border-radius: 8px;" @click="getCode">获取验证码</a-button>
              <div class="count-down" v-else>{{second}}<span>s</span></div>
            </a-form-item>
            <a-form-item>
              <a-input v-model="password" :type="typePwd" placeholder="请输入密码">
                <a-icon slot="suffix" @click="showPwd" type="eye" />
              </a-input>
            </a-form-item>
            <a-form-item>
              <p class="beizhu">备注：密码由6～20位字母+数字组成</p>
              <a-checkbox v-model="agree">
                同意<router-link to="/contactUs?id=1">《用户服务协议》</router-link><router-link to="/contactUs?id=2">《隐私协议》</router-link>
              </a-checkbox>
            </a-form-item>
          </a-form>
          <a-button type="primary" class="login-form-button" @click="handleSubmit">立即注册</a-button> 
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import Header from "../../components/Header.vue";
export default {
  name: 'register',
  components: {
    Header
  },
  data() {
    return {
      typePwd:'password',
      mobile: '',
      code: '',
      username: '',
      password: '',
      second: 60,
      showSecond: false,
      agree: false
    }
  },
  beforeCreate() {
    this.form = this.$form.createForm(this, { name: 'normal_login' });
  },
  methods: {
    goBack() {
      this.$router.go(-1);
    },
    getCode() {
      if (!this.mobile) {
        this.$message.error('请输入手机号');
      } else {
        const params = {
          mobile: this.mobile,
          event: 'register'
        }
        this.$request.post('/api/sms/send', params).then(res => {
          if (res.code == 1) {
            console.log(res.data);
            this.$message.success('验证码发送成功');
            this.second = 60;
            this.showSecond = true;
            this.countDown();
          } else {
            this.$message.error(res.msg)
          }
        })
      }
    },
    // 倒计时
    countDown () {
      const setInnt = setInterval(() => {
        if (parseInt(this.second) > 1) {
          this.second = this.second - 1;
        } else {
          clearInterval(setInnt);
          this.second = 60;
          this.showSecond = false;
        }
      }, 1000);
    },
    showPwd (){
      this.typePwd = this.typePwd === 'password' ? 'text' : 'password';
    },
    handleSubmit() {
      if (!this.username) {
        this.$message.error('请输入账号');
        return;
      } else if (!this.mobile) {
        this.$message.error('请输入手机号');
        return;
      } else if (!this.code) {
        this.$message.error('请输入验证码');
        return;
      } else if (!this.password) {
        this.$message.error('请输入密码');
        return;
      }
      if (!this.agree) {
        this.$message.error('请勾选协议');
        return;
      }
      const params = {
        username: this.username,
        mobile: this.mobile,
        code: this.code,
        password: this.password,
      }
      this.$request.post('api/user/register', params).then(res => {
        if (res.code == 1) {
          console.log(res.data);
          this.$message.success('注册成功！');
          localStorage.setItem('userinfo', res.data.userinfo);
          setTimeout(() => {
            this.$router.push('/login');
          },300)
        } else {
          this.$message.error(res.msg)
        }
      })
    },
  }
}
</script>
<style lang="less" scoped>
.register {
  .register-box{
    width: 100%;
    height: 100vh;
    overflow: auto;
    background: url('../../assets/images/login-bg.png') no-repeat;
    background-size: 100% 100%;
    position: relative;
    padding-top: 80px;
  }
  .container{
    width: 1200px;
    height: calc(100vh - 73px);
    position: absolute;
    top: 55%;
    transform: translateY(-50%);
    left: calc(50% - 600px);
    background: #fff;
    .fanhui{
      display: flex;
      align-items: center;
      padding-top: 25px;
      margin-left: 48px;
      cursor: pointer;
      img{
        width: 16px;
        height: 16px;
        margin-right: 5px;
      }
      span{
        font-weight: 400;
        font-size: 16px;
        color: #0088FF;
      }
    }
    .register-form{
      width: 480px;
      margin: 0 auto;
      padding: 50px 0;
      .re-title{
        margin-bottom: 58px;
        p{
          font-weight: 500;
          font-size: 18px;
          color: #1D2129;
        }
        span{
          width: 36px;
          height: 4px;
          background: linear-gradient( #3881F8 0%, #5EA3FE 100%);
          border-radius: 4px;
          display: block;
          margin: 0px auto;
        }
      }
      .formclass{
        padding: 0 40px;
        .beizhu{
          text-align: left;
          font-size: 13px;
        }
      }
      .login-form-button{
        width: 362px;
        height: 52px;
        background: linear-gradient( 90deg, #3881F8 0%, #5EA3FE 100%);
        font-weight: 400;
        font-size: 17px;
        color: #FFFFFF;
        line-height: 52px;
        display: block;
        margin: 20px auto;
      }
    }
    .count-down{
      font-size: 16px;
      font-family: PingFang SC-Regular, PingFang SC, sans-serif;
      font-weight: 400;
      color: #FF6700;
      margin-left:21px;
      position: absolute;
      right: 10px;
      top: -6px
    }
  }
}
/deep/ .ant-input{
  height: 54px;
  background: #F2F4F9;
  border: none;
}
</style>